<script lang="ts" setup>
import { ref } from 'vue'
import { vh, vw } from '../utils'

const props = withDefaults(
  defineProps<{
    show?: boolean
    options: {
      title: string
      z?: number
      [key: string]: any
    }
    full?: boolean
  }>(),
  {
    show: false,
    z: 3333,
    full: true,
  },
)

const fullScreen = ref(props.full)
function changefullScreen() {
  fullScreen.value = !fullScreen.value
}

const emits = defineEmits(['close'])

const handleClose = () => {
  emits('close')
}
</script>

<template>
  <Teleport to="#screen">
    <div
      class="project-wrap flex-row-center"
      @click.stop
      :style="{
        zIndex: options.z,
      }"
    >
      <div
        class="project-wrap-box"
        :style="{
          width: fullScreen ? '100vw' : vw(1200),
          height: fullScreen ? '100vh' : vh(800),
        }"
      >
        <div class="project-wrap-box-hd flex-row-between">
          <div class="project-wrap-box-hd-title flex-row-start">
            <img
              class="project-wrap-box-hd-title-tag"
              src="../images/dialog-title-tag.png"
            />
            {{ options.title }}
          </div>
          <div class="flex-row-start">
            <div class="project-wrap-box-hd-full" @click="changefullScreen">
              <img
                class="project-wrap-box-hd-close"
                src="@screen/images/full-screen.png"
              />
            </div>
            <img
              @click="handleClose"
              class="project-wrap-box-hd-close"
              src="../images/close.png"
            />
          </div>
        </div>
        <img
          class="project-wrap-box-divided"
          src="../images/header-line.png"
          alt=""
        />
        <div
          class="project-wrap-box-content"
          :style="{
            height: fullScreen ? '92vh' : '66vh',
          }"
        >
          <slot :full="fullScreen"></slot>
        </div>
        <div class="project-wrap-box-footer">
          <img src="../images/footer-line.png" alt="" />
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style lang="scss" scoped>
/* 整个滚动条 */
::-webkit-scrollbar {
  width: vw(8);
  height: vh(8) !important;
  opacity: 1;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: transparent;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: vw(8);
  background: rgba(104, 121, 148, 1);
  height: vh(30);
}

/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background: rgba(104, 121, 148, 1);
  /* 悬停时颜色 */
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

:deep(.el-input__wrapper),
:deep(.el-table__cell),
:deep(.el-pagination),
:deep(.el-pager),
:deep(.el-select__wrapper),
:deep(.is-active),
:deep(.el-pager .number),
:deep(.el-table__empty-text) {
  font-size: vw(14) !important;
}

:deep(.el-table__empty-text) {
  color: #fff;
}

.project-wrap {
  color: #fff;
  --el-text-color-placeholder: rgba(88, 105, 124, 1);
  --el-table-tr-bg-color: rgba(29, 50, 92, 0.6);
  --el-table-border: 1px solid rgba(108, 128, 151, 0.5);
  --el-fill-color-light: rgba(17, 127, 211, 0.6);
  --el-table-header-bg-color: rgba(47, 102, 232, 0.1);

  --el-text-color-regular: rgba(208, 222, 238, 1);
  --el-table-border-color: rgba(108, 128, 151, 0.5);
  --el-border-color-lighter: rgba(108, 128, 151, 0.5);

  --el-bg-color: rgba(108, 128, 151, 0.3);

  --el-pagination-bg-color: rgba(31, 95, 201, 0.1);
  --el-fill-color-blank: rgba(31, 95, 201, 0.1);
  --el-fill-color-lighter: rgba(47, 102, 232, 0.1);

  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 3333;
  animation: fadeIn 0.6s ease forwards;

  &-box {
    position: relative;
    width: vw(880);
    padding: vh(16) vw(16);
    background: rgba(29, 50, 92, 0.6);

    border: 1px solid rgba(108, 128, 151, 0.5);

    backdrop-filter: blur(vw(20));
    font-size: vw(14);

    &-hd {
      height: vh(40);
      background: linear-gradient(
        165.2deg,
        rgba(47, 102, 232, 0.2) 0%,
        rgba(47, 102, 232, 0.08) 100%
      );

      &-title {
        min-width: vw(366);
        height: vh(40);
        padding-left: vw(12);
        /** 文本1 */
        font-size: vw(20);
        font-weight: 700;
        background: url(../images/dialog-title.png) no-repeat center/cover;
        &-tag {
          width: vw(24);
          margin-right: vw(12);
        }
      }

      &-full {
        margin-right: vw(16);
        cursor: pointer;
        font-size: vw(14);

        &:hover {
          color: var(--big-screent-hover-color);
        }
      }

      &-close {
        width: vw(24);
        cursor: pointer;
      }
    }

    &-divided {
      width: 100%;
    }

    &-content {
      padding: vh(24) vw(8) vh(30) vw(8);
      height: 92vh;
      overflow: auto;
    }

    &-footer {
      position: absolute;
      width: 100%;
      bottom: vh(17);
      left: 0;
      right: 0;
      padding: 0 vw(16);

      & img {
        width: 100%;
      }
    }
  }
}

:deep(.el-input__wrapper) {
  padding-left: vw(12);
  background: transparent !important;
  border: none !important;
  font-size: vw(16);
  box-shadow: none !important;
}

:deep(th) {
  color: rgba(108, 128, 151, 1) !important;
  font-size: vw(14) !important;
}

:deep(.el-table tr) {
  background: transparent !important;
}

:deep(.el-table td),
:deep(.el-table th.el-table__cell.is-leaf) {
  border: none;
}

:deep(.el-table th.el-table__cell) {
  background: rgba(47, 102, 232, 0.1);
}

:deep(.el-table--fit .el-table__inner-wrapper:before) {
  background-color: transparent;
}

:deep(.el-pager li),
:deep(.el-pagination button) {
  background-color: rgba(31, 95, 201, 0.1) !important;
  color: #fff;
  height: vh(32) !important;
}

:deep(.el-pager li.is-active) {
  background-color: var(--big-screent-hover-color) !important;
}

:deep(.el-select),
:deep(.is-active),
:deep(.el-pagination .el-input__wrapper) {
  height: vh(32) !important;
}

:deep(.el-select__wrapper) {
  min-height: vh(32) !important;
}

:deep(.el-pagination .el-input) {
  width: vw(56) !important;
}

:deep(.search-input) {
  width: vw(212) !important;
  height: vh(40) !important;
  border: none !important;
}

:deep(.events_title) {
  padding: vh(23) 0 vh(12);
  font-size: vw(14);
  font-weight: 700;
  line-height: vh(24);
  color: rgba(255, 255, 255, 1);
}

:deep(.el-step__title) {
  font-size: vw(12) !important;
}

:deep(.el-step__description div) {
  font-size: vw(14) !important;
}

:deep(.el-step__icon) {
  width: vw(24);
  height: vw(24);
  font-size: vw(14);
}

:deep(.el-step__line) {
  top: vh(11) !important;
  height: vh(2) !important;
  background-color: rgba(29, 50, 92, 0.6);
}
</style>
